<template>
	<!-- 父元素站位：状态栏高度 + navbar的高度 -->
	<view class="navbar" :style="{ height: systemInfo.statusBarHeight + systemInfo.navBarHeight + 'px' }">
		<!-- 真正的navbar是浮动的，使用padding-top而不是top，目的是为了盖住状态栏，使状态栏和navbar背景颜色统一 -->
		<view class="navBar-content" :style="{ height: systemInfo.navBarHeight + 'px', paddingTop: systemInfo.statusBarHeight + 'px' }">
			<!-- 抖音已经自带了回退按钮 -->
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{ height: systemInfo.navBarHeight + 'px' }"></view>
			<view class="back">
				<image class="back-img" v-show="isShowBack" src="@/static/images/icons/arrow_left.png" mode="widthFix" @click="handleBack"></image>
			</view>
			<!-- #endif -->

			<view class="title">{{ title }}</view>
		</view>
	</view>
</template>

<script setup>
	import useCommonStore from '@/stores/common/common.js';
	import { storeToRefs } from 'pinia';
	import { onMounted, ref } from 'vue';

	// - props/emit
	defineProps({
		title: {
			type: String,
			default: () => '短剧'
		}
	});
	const emit = defineEmits(['backCb']);

	// - store
	const commonStore = useCommonStore();
	const { systemInfo } = storeToRefs(commonStore);

	// - data
	const isShowBack = ref(true); // 是否显示返回按钮

	// - methods
	const handleBack = () => {
		uni.navigateBack({
			success() {
				emit('backCb'); // 返回成功的回调(如果需要在返回时做一些事)
			}
		});
	};
	const isShowBackFn = () => {
		// 一级页面不显示
		const pages = getCurrentPages();
		const currentPageRoute = pages[pages.length - 1].route;
		const tabPages = ['pages/index/index'];

		return !tabPages.includes(currentPageRoute);
	};

	// - lifecycle
	onMounted(() => {
		// 判断是否显示回退按钮
		isShowBack.value = isShowBackFn();
	});
</script>

<style lang="scss">
	.navbar {
		.navBar-content {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 98;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			font-size: 36rpx;
			font-weight: 500;
			color: #121212;

			.back {
				margin-left: 30rpx;

				.back-img {
					width: 20rpx;
				}
			}
			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>
